<template>
  <div>
    <el-container>
      <el-header style="height: 45px;"><h6>产品详情</h6></el-header>

      <el-main style="height: 200px">
          <el-descriptions title="产品基本信息" :data="Process">
              <el-descriptions-item label="生产批次" align="center">{{Process.batchNum}}</el-descriptions-item>
              <el-descriptions-item label="作物名称" align="center" prop="productName">{{Process.productName}}</el-descriptions-item>
              <el-descriptions-item label="厂商名称" align="center" prop="firmName">{{Process.firmName}}</el-descriptions-item>
              <el-descriptions-item label="生产日期" align="center" prop="productionTime" width="180">{{Process.productionTime}}</el-descriptions-item>
              <el-descriptions-item label="保质期" align="center" prop="shelfLife" >{{Process.shelfLife}}</el-descriptions-item>
              <el-descriptions-item label="质量检测名称" align="center" prop="qualityName" >{{Process.qualityName}}</el-descriptions-item>
              <el-descriptions-item label="加工状态" align="center" prop="processStatus" >{{Process.processStatus}}</el-descriptions-item>
              <el-descriptions-item label="仓库状态" align="center" prop="bankStatus" >{{Process.bankStatus}}</el-descriptions-item>
              <el-descriptions-item label="备注" align="center" prop="remark">{{Process.remark}}</el-descriptions-item>
          </el-descriptions>
      </el-main>


      <el-main style="height: 200px">
        <el-descriptions title="加工农场信息" :data="Firm">
<!--          <el-descriptions-item label="生产批次" align="center" prop="batchNum" >{{Firm.batchNum}}</el-descriptions-item>-->
          <el-descriptions-item label="工厂名称" align="center" prop="firmName">{{Firm.firmName}}</el-descriptions-item>
          <el-descriptions-item label="作物名称" align="center" prop="productName">{{Firm.productName}}</el-descriptions-item>
          <el-descriptions-item label="工厂负责人" align="center" prop="firmPrincipal" >{{Firm.firmPrincipal}}</el-descriptions-item>
          <el-descriptions-item label="加工数量" align="center" prop="num" >{{Firm.num}}</el-descriptions-item>
          <el-descriptions-item label="备注" align="center" prop="remark" >{{Firm.remark}}</el-descriptions-item>
        </el-descriptions>
      </el-main>



      <el-main style="height: 200px">
        <el-descriptions title="检测信息" :data="Quality">
<!--          <el-descriptions-item label="生产批次" align="center" prop="batchNum" >{{Quality.batchNum}}</el-descriptions-item>-->
<!--          <el-descriptions-item label="生产日期" align="center" prop="productionTime" width="180">{{Quality.productionTime}}</el-descriptions-item>-->
          <el-descriptions-item label="检测日期" align="center" prop="qualityTime" width="180">{{Quality.qualityTime}}</el-descriptions-item>
          <el-descriptions-item label="检测人" align="center" prop="qualityName">{{Quality.qualityName}}</el-descriptions-item>
          <el-descriptions-item label="检测结果" align="center" prop="qualityResult">
            {{Quality.qualityResult==0?'合格':'不合格'}}
          </el-descriptions-item>
          <el-descriptions-item label="作物名称" align="center" prop="productName">{{Quality.productName}}</el-descriptions-item>
          <el-descriptions-item label="产品名称" align="center" prop="processName">{{Quality.processName}}</el-descriptions-item>
          <el-descriptions-item label="物料名称" align="center" prop="materialName">{{Quality.materialName}}</el-descriptions-item>
          <el-descriptions-item label="工厂名称" align="center" prop="firmName">{{Quality.firmName}}</el-descriptions-item>
          <el-descriptions-item label="司机名称" align="center" prop="name">{{Quality.name}}</el-descriptions-item>
          <el-descriptions-item label="图片" align="center" prop="avatar" >
              <img :src="Quality.avatar" style="width: 100px;height: 100px;">
          </el-descriptions-item>
          <el-descriptions-item label="备注" align="center" prop="remark" >{{Quality.remark}}</el-descriptions-item>
        </el-descriptions>
      </el-main>


      <el-main style="height: 200px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="出库信息" name="first">
            <el-table v-loading="loading" :data="Outinfo">
              <el-table-column label="出库名称" align="center" prop="warehouseName" />
              <el-table-column label="出库批次" align="center" prop="batchNum" />
              <el-table-column label="出库数量" align="center" prop="count" />
              <el-table-column label="来源" align="center" prop="source" />
              <el-table-column label="目的地" align="center" prop="destination" />
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="入库信息">
            <el-table v-loading="loading" :data="Ininfo">
              <el-table-column label="入库名称" align="center" prop="warehouseName" />
              <el-table-column label="入库批次" align="center" prop="batchNum" />
              <el-table-column label="入库数量" align="center" prop="count" />
              <el-table-column label="物流单号" align="center" prop="physicalNum" />
              <el-table-column label="来源" align="center" prop="source" />
              <el-table-column label="目的地" align="center" prop="destination" />
              <el-table-column label="状态" align="center" prop="status" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>

    </el-container>


  </div>
</template>

<script>
import {
  listFirm,
  listQuality,
  listAll,
  listOutinfo,
  listininfo,
} from "@/api/ewem/process";
export default {
  name: "index",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      Firm:{},
      warehouseList:[],
      Quality:{},
      Process:{},
      activeName: 'first',
      Outinfo:[],
      Ininfo:[],
    }

  },
  methods: {
    getList() {
      let batchNum=this.$route.query.batchNum;
      listAll(batchNum).then(response => {
        this.Process = response.process;
        console.log(response.process);
      });
    },
    getlist2(){
      let batchNum=this.$route.query.batchNum;
      listFirm(batchNum).then(response=>{
        this.Firm=response.firm;
      })
    },
    getlist3(){
      let batchNum=this.$route.query.batchNum;
      listQuality(batchNum).then(response=>{
        this.Quality=response.quality;
      })
    },
    // getlist4(){
    //   this.loading=true;
    //   let batchNum=this.$route.query.batchNum;
    //   listWareHouse(batchNum).then(response=>{
    //     this.warehouseList=response.warehouse;
    //     this.loading=false;
    //   })
    // },
    handleClick(tab, event) {
      console.log(tab, event);
    },getlist5(){
      this.loading=true;
      let batchNum=this.$route.query.batchNum;
      listOutinfo(batchNum).then(response=>{
        this.Outinfo=response.outing;
        this.loading=false;
      })
    },getlist6(){
      this.loading=true;
      let batchNum=this.$route.query.batchNum
      listininfo(batchNum).then(response=>{
        this.Ininfo=response.info;
        this.loading=false;
      })

    }

  },
  created() {
this.getList();
this.getlist2();
this.getlist3();
// this.getlist4();
this.getlist5();
this.getlist6();
  }
}
</script>

<style scoped>

</style>
